<!-- 动态上下翻滚的表格 -->
<template>
  <div class="table-wrap">
    <div class="titleContent">
      <div class="tit">日期</div>
      <div class="tit">开始时间</div>
      <div class="tit">结束时间</div>
      <div class="tit">应到人数</div>
      <div class="tit">实到人数</div>
      <div class="tit">实到占比</div>
    </div>

    <!-- 配置详情请见 README.md -->
    <vue3-seamless-scroll
        :list="periodDataList"
        class="scroll"
        direction="up"
        :step="0.9"
        :hover="true"
        :limit-scroll-num="8"
        :is-watch="true"
        :single-height="0"
        :single-width="0"
        :single-wait-time="1000"
        :wheel="false"
    >
      <div class="countContent" v-for="(item, i) in periodDataList" :key="i">
        <div class="descr">{{ item.dateTime }}</div>
        <div class="descr">{{ item.startTime }}</div>
        <div class="descr">{{ item.endTime }}</div>
        <div class="descr">{{ item.shouldArriveNumber }}</div>
        <div class="descr">{{ item.actualAttendance }}</div>
        <div class="descr">{{ item.bl }}</div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const periodDataList = ref([
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "1",
      actualAttendance: "100",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "2",
      actualAttendance: "200",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "3",
      actualAttendance: "300",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "4",
      actualAttendance: "400",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "5",
      actualAttendance: "500",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "6",
      actualAttendance: "600",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "7",
      actualAttendance: "700",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "8",
      actualAttendance: "800",
      bl: "10%"
    },
    {
      dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "9",
      actualAttendance: "800",
      bl: "10%"
    }
  ]);
</script>

<style lang="scss" scoped>
  .table-wrap {
    margin: 20px;
    width: calc(100% - 40px);
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    .scroll {
      max-height:320px;
      overflow: hidden;
    }
  }
  .titleContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    .tit {
      flex: 0 0 16.6%;
      text-align: center;
    }
  }
  .countContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    .descr {
      flex: 0 0 16%;
      padding: 10px 0;
      text-align: center;
    }
  }
  .countContent:nth-of-type(odd) {
    background: #318699 !important;
    color: #ffffff;
    .descr {
      border-right: 1px solid #247587;
    }
  }
</style>
